<template>
    <!-- 新增Dialog对话框 -->
            <!-- 新增表单-->
        <!-- 表单 -->
    <el-dialog v-model="dialogVisible" :title='Title' width="50%" :before-close="handleClose">

        <el-form :model="form">
            <el-form-item label="名称" :label-width="useFormLabelWidth">
                <el-input v-model="form.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">取消</el-button>
                <el-button :plain="true" type="primary" @click=" dialogVisible = false;editHandles();">确定</el-button>
            </span>
        </template>
    </el-dialog>


    <!-- 用例总数： -->
    <el-text type="success" style="font-size: 20px; display: inline-block; margin-top: 10px;">任务数量：{{ total }}</el-text>

    <!-- 表格 -->
    <el-table :data="tableData" ref="multipleTableRef" data="tableData" style="width: 100%;">
        <!-- <el-table-column type="selection" width="70" /> -->
        <el-table-column prop="id" label="ID编号" width="200" />
        <el-table-column prop="name" label="名称" width="200" />
        <el-table-column prop="success" label="功能数量" width="200" />
        <el-table-column prop="total" label="总数" width="200" />
        <el-table-column prop="rate" label="成功率" width="200" />

        <el-table-column label="操作">
            <template #default="scope">
                <!-- 修改用例数据 -->
                <el-button size="small"
                    @click=" dialogVisible = true;editHandle(scope.$index);Title = '修改用例'">修改</el-button>

                <!-- 删除用例 -->
                <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>

            </template>
        </el-table-column>
    </el-table>
</template>





<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useFormLabelWidth } from 'element-plus/es/components/form/src/utils';

// 修改
const editHandle = (index) => {
    form.value = tableData.value[index]
    console.log(form.value);
}


// Dialog框
// 新增Dialog对话框
const dialogVisible = ref(false)
const handleClose = (done) => {
    ElMessageBox.confirm('确定要关闭新增用例对话框吗？')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

// 
const editHandles = ()=>{
    // 修改用例
    console.log(form.value);
    $api.task.updateTask(form.value).then((result) => {
            console.log('result', result)
            ElMessage.success(result.data.msg)
        })

}


// 删除操作
const handleDelete = (id) => {
    ElMessageBox.confirm(
        '确定删除？删除后数据将无法找回',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 删除用例
            // 调用删除接口
            $api.task.deleteTask({ id: id }).then((result) => {
                console.log('result', result)
                ElMessage.success(result.data.msg)
                // 删除成功后，调用查询接口，加载表格数据
                $api.task.getTask().then((result) => {
                    console.log('result', result)
                    tableData.value = result.data.data
                })
            })
        })
        .catch(() => {
            ElMessage.info('取消删除')
        })
}




// 计算用例数据 ref

const tableData = ref([])

const total = computed(() => {
    return tableData.value.length
})


const form = ref()
// 初始化表单
const initForm = () => {
    form.value = {
        id: '',
        name: '',
        success: '',
        total: '',
        rate: '',
    }
}
// 初始化数据
const initData = () => {
    $api.task.getTask()
        .then((result) => {
            if (result.data.code == 0) {
                tableData.value = result.data.data
                ElMessage.success(result.data.msg)

            } else {
                ElMessage.warning(result.data.msg)
            }


        })
}


onMounted(() => {
    initForm()
    initData()

})
</script>

<style scoped>
/* Dialog对话框 */
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>